<template>
  <div class="login-container">
    <el-steps :active="current"  align-center>
      <el-step title="验证账号信息"></el-step>
      <el-step title="修改账户密码"></el-step>
      <el-step title="登录"></el-step>
    </el-steps>
    <el-form ref="formInline" :model="formInline" size="medium" :rules="ruleInline" class="login-form" autocomplete="on" label-position="left">
      <template v-if="current === 0">
        <el-form-item prop="phone">
          <el-input type="text" v-model="formInline.phone" prefix="ios-contact-outline"
                    placeholder="请输入手机号" size="large" :readonly="infoData.phone?true:false"/>
        </el-form-item>
        <el-form-item prop="code" class="captcha">
          <div class="acea-row" style="flex-wrap: nowrap;">
            <el-input
              ref="username"
              v-model="formInline.code"
              placeholder="验证码"
              name="username"
              type="text"
              tabindex="1"
              autocomplete="off"
              prefix-icon="el-icon-message"
              style="width: 90%"
            />
            <el-button size="mini" :disabled=!this.canClick @click="cutDown">{{cutNUm}}</el-button>
          </div>
        </el-form-item>
      </template>
      <template v-if="current === 1">
        <el-form-item prop="password" class="maxInpt">
          <el-input type="password" v-model="formInline.password" prefix="ios-lock-outline"
                    placeholder="请输入新密码" size="large"/>
        </el-form-item>
        <el-form-item prop="checkPass" class="maxInpt">
          <el-input type="password" v-model="formInline.checkPass" prefix="ios-lock-outline"
                    placeholder="请验证新密码" size="large"/>
        </el-form-item>
      </template>
      <template v-if="current === 2">
        <el-form-item prop="phone" class="maxInpt">
          <el-input type="text" v-model="formInline.phone" prefix="ios-contact-outline"
                    placeholder="请输入手机号"/>
        </el-form-item>
        <el-form-item prop="password" class="maxInpt">
          <el-input type="password" v-model="formInline.password" prefix="ios-lock-outline"
                    placeholder="请输入密码"/>
        </el-form-item>
      </template>
      <el-form-item class="maxInpt">
        <el-button v-if="current === 0" type="primary"  @click="handleSubmit1('formInline',current)" class="mb20 width100">下一步</el-button>
        <el-button  v-if="current === 1" type="primary"  @click="handleSubmit2('formInline',current)" class="mb20 width100">提交</el-button>
        <el-button  v-if="current === 2" type="primary"  @click="handleSubmit('formInline',current)" class="mb20 width100">登录</el-button>
        <el-button @click="returns('formInline')" class="width100" style="margin-left: 0px;">返回</el-button>
      </el-form-item>

      <!--<el-button v-if="current === 0"  size="mini" :loading="loading" type="primary" style="width:100%;margin-bottom:20px;" @click="handleSubmit('formInline')">注册</el-button>-->
      <!--<el-button size="mini" type="primary" style="width:100%;margin-bottom:20px;" @click="changelogo">立即登录</el-button>-->
    </el-form>
  </div>
</template>

<script>
    import { updatePasswordApi, captchaApi, configApi } from '@/api/sms';
    export default {
        name: 'forgetPassword',
        data () {
            const validatePhone = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('请填写手机号'));
                } else if (!/^1[3456789]\d{9}$/.test(value)) {
                    callback(new Error('手机号格式不正确!'));
                } else {
                    callback();
                }
            };
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                }else {
                    if(this.current === 1){
                        if (this.formInline.checkPass !== '') {
                            this.$refs.formInline.validateField('checkPass');
                        }
                        callback();
                    }else{
                        if(value !== this.formInline.checkPass){
                            callback(new Error('请输入正确密码!'));
                        }
                        callback();
                    }
                }
            };
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.formInline.password) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                isReadonly: false,
                cutNUm: '获取验证码',
                canClick: true,
                current: 0,
                formInline: {
                    account: '',
                    phone: '',
                    code: '',
                    password: '',
                    checkPass: '',
                },
                ruleInline: {
                    phone: [
                        { required: true, validator: validatePhone, trigger: 'blur' }
                    ],
                    code: [
                        { required: true, message: '请输入验证码', trigger: 'blur' }
                    ],
                    password: [
                        { validator: validatePass, trigger: 'blur' }
                    ],
                    checkPass: [
                        { validator: validatePass2, trigger: 'blur' }
                    ],
                }
            }
        },
        props:{
          infoData: {
            type: Object,
            default: null
          }
        },
        mounted(){
          this.infoData ? this.formInline.phone = this.infoData.phone : this.formInline.phone = '';
        },
        methods: {
            // 短信验证码
            cutDown () {
                if (this.formInline.phone) {
                    if (!this.canClick) return;
                    this.canClick = false;
                    this.cutNUm = 60;
                    let data = {
                        phone: this.formInline.phone,
                        types: 1
                    };
                    captchaApi(data).then(async res => {
                        this.$message.success(res.msg);
                    })
                    let time = setInterval(() => {
                        this.cutNUm--;
                        if (this.cutNUm === 0) {
                            this.cutNUm = '获取验证码';
                            this.canClick = true;
                            clearInterval(time)
                        }
                    }, 1000)
                } else {
                    this.$message.warning('请填写手机号!');
                }
            },
            handleSubmit1 (name, current) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                      this.current = 1;
                    } else {
                        return false;
                    }
                })
            },
            handleSubmit2(name) {
                this.formInline.account = this.formInline.phone
                this.$refs[name].validate((valid) => {
                    if (valid) {
                      updatePasswordApi(this.formInline).then(async res => {
                            this.$message.success('修改成功');
                            this.current = 2;
                        })
                    } else {
                        return false;
                    }
                })
            },
            //登录
            handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        configApi({
                            account: this.formInline.account,
                            password: this.formInline.password
                        }).then(async res => {
                            this.$message.success('登录成功!');
                            this.$emit('on-Login');
                        })
                    } else {
                        return false;
                    }
                })
            },
            returns () {
                this.current === 0 ? this.$emit('goback'): this.current = 0
            }
        }
    }
</script>

<style scoped lang="scss">
  .login-form {
    flex: 1;
    padding: 32px 0;
    text-align: center;
    width: 384px;
    margin: 0 auto;
    overflow: hidden;
  }
  .width100{
    width: 100%;
  }

    .maxInpt{
        max-width:400px;
        margin-left:auto;
        margin-right:auto;
    }
    .code {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .ivu-steps-item:last-child{
        width: unset!important;
    }
</style>
